<template>
  <div class="detail">
    <van-nav-bar title="商品详情" fixed left-arrow @click-left="$router.go(-1)" />

    <van-swipe :autoplay="4000" @change="onChange">
      <van-swipe-item v-for="(item, index) in images" :key="index">
        <img :src="item.external_url" alt="">
      </van-swipe-item>

      <template #indicator>
        <div class="custom-indicator"> {{ current + 1 }} / {{ images.length }}</div>
      </template>
    </van-swipe>

    <div class="info">
      <div class="price">
        <div>
          <span class="new">¥{{ detail.goods_price_min }}</span>
          <span class="old">¥{{ detail.goods_price_min }}</span>
        </div>
        <div>
          <span>已售 {{detail.goods_sales }} 件</span>
        </div>
      </div>
      <div class="name">
        {{ detail.goods_name }}
      </div>
      <div class="send">
        <div>
          <span><van-icon name="passed" />七天无理由退货</span>
          <span><van-icon name="passed" />48小时发货</span>
        </div>
        <div>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>

    <div class="comment">
      <div class="title">
        <span>商品评价({{ total }})</span>
        <span>查看更多<van-icon name="arrow" /></span>
      </div>

      <CommentItem v-for="item in commentList" :key="item.coment_id" :item="item"></CommentItem>
    </div>

    <div class="desc" v-html="detail.content"></div>

    <div class="footer">
      <div class="home" @click="$router.push('/')">
        <van-icon name="wap-home-o" />
        <span>首页</span>
      </div>
      <div class="home" @click="$router.push('/cart')">
        <van-icon name="shopping-cart-o" />
        <span>购物车</span>
      </div>
      <div class="btn-add" @click="showSheet(0)">加入购物车</div>
      <div class="btn-buy" @click="showSheet(1)">立刻购买</div>
    </div>

    <van-action-sheet v-model="showPannel" :title="mode === 'cart' ? '加入购物车' : '立刻购买'">
      <div class="product">
        <div class="title">
          <div class="left">
            <img :src="detail.goods_image" alt="">
          </div>
          <div class="right">
            <div class="price">
              <span>¥</span>
              <span class="nowprice">{{ detail.goods_price_min }}</span>
            </div>
            <div class="count">
              库存 {{ detail.stock_total }}
            </div>
          </div>
        </div>
        <div class="num">
          <span>数量</span>
          <CountBox v-model="addCount"></CountBox>
        </div>
        <div v-if="detail.stock_total > 0" class="button">
          <button v-if="mode === 'cart'" @click="addCart">加入购物车</button>
          <button v-else-if="mode === 'buyNow'" class="buy" @click="addBuy">立刻购买</button>
        </div>
        <div v-else class="button">
          <button class="nocount">暂无库存</button>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { getProDetail, getProComments } from '@/api/product'
import { addCart } from '@/api/cart'
import CommentItem from '@/components/CommentItem.vue'
import CountBox from '@/components/CountBox.vue'
import loginConfirm from '@/mixins/loginConfirm'

export default {
  name: 'DetailPage',
  mixins: [loginConfirm],
  components: {
    CommentItem,
    CountBox
  },
  data () {
    return {
      images: [],
      current: 0,
      detail: {},
      total: 0,
      commentList: [],
      addCount: 1,
      showPannel: false,
      mode: 'cart',
      cartTotal: 0
    }
  },
  computed: {
    goodsId () {
      return this.$route.params.id
    }
  },
  created () {
    this.getDetail()
    this.getCommentList()
  },
  methods: {
    async getDetail () {
      const { data: { detail } } = await getProDetail(this.goodsId)
      this.detail = detail
      this.images = detail.goods_images
    },
    onChange (index) {
      this.current = index
    },
    async getCommentList () {
      const { data: { list, total } } = await getProComments(this.goodsId, 3)
      this.commentList = list
      this.total = total
    },
    showSheet (flag) {
      if (flag === 0) {
        this.mode = 'cart'
      } else {
        this.mode = 'buyNow'
      }
      this.showPannel = true
    },
    async addCart () {
      if (this.loginConfirm()) {
        return
      }
      const { data } = await addCart(this.goodsId, this.addCount, this.detail.skuList[0].goods_sku_id)
      this.cartTotal = data.cartTotal
      this.$toast('加入购物车成功')
      this.showPannel = false
    },
    addBuy () {
      if (this.loginConfirm()) {
        return
      }
      this.$router.push({
        path: '/pay',
        query: {
          mode: 'buyNow',
          goodsId: this.goodsId,
          goodsSkuId: this.detail.skuList[0].goods_sku_id,
          goodsNum: this.addCount
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.detail {
  img {
    display: block;
    width: 100%;
  }
  .custom-indicator {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 5px 10px;
    font-size: 12px;
    background: rgba(0, 0, 0, .1);
    border-radius: 15px;
  }
}
.info {
  .price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    .new {
      font-size: 18px;
      color: #ef2209;
      margin-right: 5px;
    }
    .old {
      font-size: 14px;
      color: #999;
      text-decoration: line-through;
    }
    span {
      color: #999;
    }
  }
  .name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-height: 1.5;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-left: 10px;
  }
}
.send {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fafafa;
  padding: 10px;
  margin-top: 10px;
  span {
    margin-right: 15px;
    .van-icon {
      color: #fa2209;
      margin-right: 10px;
    }
  }
}
.comment {
  display: flex;
  flex-direction: column;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    :last-child {
      color: #999;
    }
  }
}
.desc {
  width: 100%;
  overflow: scroll;
  ::v-deep img {
    display: block;
    width: 100% !important;
  }
}
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 55px;
  width: 100%;
  background-color: white;
  border-top: 1px solid #ccc;
  .home {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .van-icon {
      font-size: 24px;
    }
    .num {
      z-index: 999;
      position: absolute;
      top: -2px;
      right: -3px;
      padding: 0 4px;
      color: #fafafa;
      text-align: center;
      background-color: #ee0a24;
      border-radius: 50%;
      font-size: 14px;
    }
  }
  .btn-add, .btn-buy {
    height: 36px;
    line-height: 36px;
    width: 120px;
    border-radius: 18px;
    text-align: center;
    color: white;
    font-size: 14px;
    background-color: #ffa900;
  }
  .btn-buy {
    background-color: #fe5630;
  }
}
.product {
  .title {
    display: flex;
    padding: 10px;
    .left {
      margin-right: 10px;
      img {
        display: block;
        width: 90px;
        height: 90px;
      }
    }
    .right {
      .price {
        color: #ee0a24;
        font-size: 14px;
        .nowprice {
          font-size: 24px;
          font-weight: 500;
        }
      }
      .count {
        font-size: 16px;
        color: #444;
        margin-top: 5px;
      }
    }
  }
  .num {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    span {
      color: #444;
      font-size: 18px;
    }
  }
  .button {
    display: flex;
    justify-content: center;
    padding: 15px 0;
    button {
      display: block;
      width: 80%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: white;
      background-color: rgb(255, 148, 2);
      border: none;
      border-radius: 20px;
    }
    .buy {
      background-color: #fe5630;
    }
    .nocount {
      background-color: rgba(0, 0, 0, .3);
    }
  }
}
</style>
